<template>
	<view class="edit-password">
		<!-- 返回首页 -->
		<uni-bankhome />
		<u-form class="mainBox" :model="ruleForm" ref="uForm">
			<view class="phoneNumber">
				<u-form-item label-width="150" :border-bottom="false" prop="realphone" label="手机号">
					<u-input disabled type="text" :clearable='false' v-model="userInfo.mobile" />
				</u-form-item>
				<p class="yzm" @click="send">{{countDown}}</p>
			</view>
			<view class="phoneNumber">
				<u-form-item label-width="150" :border-bottom="false" prop="code" label="验证码">
					<u-input type="text" :clearable='false' v-model="code" placeholder="请输入手机验证码" />
				</u-form-item>
			</view>
			<view class="phoneNumber">
				<u-form-item label-width="150" :border-bottom="false" label='设置新密码'>
					<input disabled v-if="codeType" type="text" v-model="newPassword" @click="popup('newPassword')"
						placeholder="请输入6位数字" />
					<input disabled v-if="!codeType" type="password" v-model="newPassword" @click="popup('newPassword')"
						placeholder="请输入6位数字" />
				</u-form-item>
				<image :src="codeType?'../../../../static/hide.png':'../../../../static/display.png'" @click="reveal">
				</image>
			</view>
			<view class="phoneNumber">
				<u-form-item label-width="150" :border-bottom="false" label='确认密码'>
					<input disabled v-if="codeTypes" type="text" v-model="confirmPassword" @click="popup('confirmPassword')"
						placeholder="请再次输入密码确认一致" />
					<input disabled v-if="!codeTypes" type="password" v-model="confirmPassword" @click="popup('confirmPassword')"
						placeholder="请再次输入密码确认一致" />
				</u-form-item>
				<image :src="codeTypes?'../../../../static/hide.png':'../../../../static/display.png'" @click="reveals">
				</image>
			</view>
			<view class="submit" @click="editPassword">保存</view>
		</u-form>
		<pay-password title="请设置支付密码" @passwordFinish="passwordFinish" type="password" ref="payPassword"></pay-password>
	</view>
</template>

<script>
	import {
		md5
	} from "@/utils/md5.js" // md5
	import {
		sendCode,

	} from "@/api/login";
	import {
		PaymentPassword
	} from "@/api/members.js"
	import storage from "@/utils/storage.js"
	import payPassword from "@/components/pay-password/pay-password.vue"
	export default {
		components: {
			payPassword
		},
		data() {
			return {
				codeType: true,
				codeTypes: true,
				ruleForm: {
					realphone: '',
					code: ''
				},
				rules: {
					realphone: [{
							required: true,
							message: "请输入手机号111",
							// 可以单个或者同时写两个触发验证方式
							trigger: "blur",
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: "手机号输入不正确",
							trigger: ["change", "blur"],
						},
					],
				},
				countDown: "获取验证码",
				type: "",
				code: "",
				newPassword: "", //新密码
				password: "", //密码
				confirmPassword: "", // 确认密码
				userInfo: {},
			};
		},

		onLoad(option) {
			this.type = option.type
			if (this.type == "edit") {
				uni.setNavigationBarTitle({
					title: '修改支付密码'
				});
			} else if (this.type == "forget") {
				uni.setNavigationBarTitle({
					title: '设置支付密码'
				});
			}
		},
		onShow() {
			this.userInfo = storage.getUserInfo()
			this.ruleForm.realphone = this.userInfo.mobile
			// uni.getStorageInfo({
			// 	success: function (res) {
			// 		console.log('@@@@@@@@@',res.keys);
			// 	}
			// });
		},
		methods: {
			//显示事件
			reveal() {
				this.codeType = !this.codeType
			},
			reveals() {
				this.codeTypes = !this.codeTypes
			},
			send() {
				sendCode({
					mobile: this.userInfo.mobile,
					verificationEnums: "WALLET_PASSWORD",
				}).then((res) => {
					if (res.data.success) {
						this.vcode()
					}
				});
			},
			vcode() {
				let countDown = 59;
				const auth_time = setInterval(() => {
					this.countDown = countDown--;
					if (this.countDown <= 0) {
						this.bVerification = false;
						this.countDown = "重新发送";
						clearInterval(auth_time);
					}
				}, 1000);
			},
			editPassword() {
				if (this.valitNew() == false) return false;
				PaymentPassword({
					mobile: this.userInfo.mobile,
					msgCode: this.code,
					newPassword: this.newPassword,
					confirmPassword: this.confirmPassword
				}).then((res) => {
					if (res.data.success) {
						storage.setUserInfo(res.data.result)
						uni.showToast({
							title: "密码设置成功!",
							duration: 2000,
							icon: "none",
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000);
					} else {
						uni.showToast({
							title: res.data.message,
							duration: 2000,
							icon: "none",
						});
					}
				})
			},
			valitNew() {
				if (this.code.length == 0) {
					uni.showToast({
						title: "请输入验证码",
						icon: "none"
					})
					return false
				}
				if (this.newPassword.length == 0) {
					uni.showToast({
						title: "请输入新密码",
						icon: "none"
					})
					return false
				}
				if (this.confirmPassword.length == 0) {
					uni.showToast({
						title: "请确认新密码",
						icon: "none"
					})
					return false
				}
				if (this.newPassword !== this.confirmPassword) {
					uni.showToast({
						title: "两次输入的密码不一致",
						icon: "none"
					})
					return false
				}
				return true
			},
			popup(type) {
				this.active = type
				if (this.active === 'newPassword') {
					this.newPassword = ''
				}
				if (this.active === 'confirmPassword') {
					this.confirmPassword = ''
				}
				if (this.active === 'password') {
					this.password = ''
				}
				this.$refs.payPassword.show = true
			},
			passwordFinish(word) {
				if (this.active === 'newPassword') {
					this.newPassword = word
				}
				if (this.active === 'confirmPassword') {
					this.confirmPassword = word
				}
				if (this.active === 'password') {
					this.password = word
				}
			},
		}
	};
</script>
<style lang="scss" scoped>
	@import url("../../../passport/login.scss");

	.mainBox {
		width: 100%;
		height: auto;

		image {
			width: 46upx;
			height: 46upx;
		}

		.phoneNumber {
			width: 100%;
			height: auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #FFFFFF;
			margin-top: 10upx;
			padding: 20upx 60upx;
			box-sizing: border-box;
			font-size: 28rpx;

			.yzm {
				color: #B8792C;
				flex-shrink: 0;
				position: absolute;
				right: 30rpx;
				top: 60rpx;
			}

			input {
				width: 100%;
				margin: 0 20upx;
			}

			.labelText {
				width: 25%;
				color: #363636;
				flex-shrink: 0;
			}
		}
	}

	/deep/.submit {

		height: 80rpx;
		line-height: 80rpx;
		color: #fff;
		text-align: center;
		font-size: 30rpx;
		border-radius: 100px;
		margin-top: 32rpx;
		background: #ff6b35;
		position: fixed;
		bottom: 30rpx;
		left: 104rpx;
		width: 544rpx;

		.text {
			margin: 4upx;
			width: 16upx;
			height: 16upx;
			background-color: #222222;
			border-radius: 16upx;
		}
	}
</style>
